<script setup>
import { reactive, ref } from 'vue';
import { useListAsync, formatTimestamp } from '../../../swy-hook/getList.js'
import addFrom from './addFrom.vue';
// import { useArticleState } from '../../../swy-hook/index.js'
import { getcommunityApi, delmaintainApi } from '../../../api/maintain'
import { ElMessage } from "element-plus";

const { getList, list, count } = useListAsync()
const addRef = ref()
const communityList = ref([])
const nextTime = ref()
const lastTime = ref()
// 表单数据
const queryData = reactive({
  current: 1,
  pageSize: 3,
  community_code: '',
  next_maintain_time: '',
  last_maintain_time: '',
  device_code: '',
  title: '',
  unit: '',
  id: null
})
// 获取小区信息列表
const initData = async () => {
  let { data } = await getcommunityApi()
  // console.log(data);
  communityList.value = data
}
// 每页数量切换
const sizeChange = (val) => {
  queryData.pageSize = val;
  getList('device/maintain', queryData)
};
// 页码切换
const currentChange = (val) => {
  queryData.current = val;
  getList('device/maintain', queryData)
};
// 搜索确定
const onSearch = () => {
  queryData.next_maintain_time = nextTime.value
  queryData.last_maintain_time = lastTime.value
  if (Array.isArray(queryData.next_maintain_time)) {
    queryData.next_maintain_time = queryData.next_maintain_time.join(',')
  }
  if (Array.isArray(queryData.last_maintain_time)) {
    queryData.last_maintain_time = queryData.last_maintain_time.join(',')
  }
  queryData.current = 1;
  // queryData.next_maintain_time = queryData.next_maintain_time.join(',')
  // queryData.last_maintain_time = queryData.last_maintain_time.join(',')
  getList('device/maintain', queryData)
};
// 搜索取消
const onReset = () => {
  nextTime.value = ''
  lastTime.value = ''
  Object.assign(queryData, {
    current: 1,
    pageSize: 3,
    community_code: '',
    next_maintain_time: '',
    last_maintain_time: '',
    device_code: '',
    title: '',
  });
  getList('device/maintain', queryData)
};
// -------------修改功能------------
const editRow = (id) => {
  addRef.value.replyData(id);
};
// -------------删除功能----------------
const delRow = async (id) => {
  await delmaintainApi(id)
  ElMessage.success('删除成功')
  if (queryData.pageNum > 1 && list.value.length === 1) queryData.pageNum--
  // initData()
  getList('device/maintain', queryData)
}
onMounted(() => {
  getList('device/maintain', queryData)
  initData()
});
</script>

<template>
  <div class="app-container">
    <div style="margin-bottom: 10px;">
      <b style="margin-right: 10px; font-size: large;">维修管理</b>
      <span>记录对资产设备的维修情况记录</span>
    </div>
    <el-card>
      <!-- 搜索区域 -->
      <el-form :model="queryData" :inline="true" class="demo-form-inline" label-position="top">
        <el-col :span="4">
          <el-form-item label="小区名称">
            <el-select placeholder="请输入" v-model="queryData.community_code" clearable>
              <el-option v-for="item in communityList" :key="item.id" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="设备编号">
            <el-input placeholder="请输入" v-model="queryData.device_code">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="最后维护时间">
            <div class="block">
              <!-- <span class="demonstration">Default</span> -->
              <el-date-picker v-model="lastTime" type="daterange" range-separator="至" start-placeholder="请选择"
                end-placeholder="请选择" :size="size" value-format="x" />
            </div>
          </el-form-item>
        </el-col>
        <el-form>
          <el-col :span="10">
            <el-form-item label="下次维护时间">
              <div class="block">
                <el-date-picker v-model="nextTime" type="daterange" range-separator="至" start-placeholder="请选择"
                  end-placeholder="请选择" :size="size" value-format="x" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :offset="6" :span="8">
            <el-form-item style="padding-top: 30px;">
              <!-- <template> -->
              <el-button type="primary" @click="onSearch">搜索</el-button>
              <el-button @click="onReset">重置</el-button>
              <!-- </template> -->
            </el-form-item>
          </el-col>
        </el-form>
      </el-form>
    </el-card>
    <el-card style="margin-top: 15px;">
      <!-- 工具区域 -->
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" @click="addRef.drawer = true">新增维修记录</el-button>
        </div>
      </el-row>
      <br>
      <!-- 表格区域 -->
      <el-table :data="list" border stripe>
        <el-table-column label="小区名称">
          <template #default="{ row }">
            {{ row.community?.name }}
          </template>
        </el-table-column>
        <el-table-column prop="device" label="设备名称">
          <template #default="{ row }">
            {{ row.device?.name }}
          </template>
        </el-table-column>
        <el-table-column prop="device_code" label="设备编码">
        </el-table-column>
        <el-table-column prop="unit" label="维修单位名称">
          <!-- <template #default="{ row }">
              {{ row.device?.brand }}
            </template> -->
        </el-table-column>
        <el-table-column prop="contacts" label="维修人名称">
        </el-table-column>

        <el-table-column prop="photo" label="照片">
          <template #default="{ row }">
            <div class="demo-image__preview">
              <el-image style="width: 100px; height: 100px" :src="`http://124.223.14.236:8881${row.photo}`"
                :zoom-rate="1.2" :preview-src-list="[`http://124.223.14.236:8881${row.photo}`]" :initial-index="99"
                :z-index="99" fit="cover" :preview-teleported="true" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="contacts_tel" label="联系方式">
        </el-table-column>
        <el-table-column prop="remark" label="备注">
        </el-table-column>
        <el-table-column prop="last_maintain_time" label="最后维护时间">
          <template #default="{ row }">
            {{ formatTimestamp(row.last_maintain_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="next_maintain_time" label="下次维护时间">
          <template #default="{ row }">
            {{ formatTimestamp(row.next_maintain_time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button @click="editRow(row.id)" type="text">编辑</el-button>
            <el-popconfirm title="确认删除吗？" @confirm="delRow(row.id)">
              <template #reference>
                <el-button type="text">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 分页区域 -->
      <el-pagination style="float: right;" @size-change="sizeChange" @current-change="currentChange"
        v-model:current-page="queryData.current" v-model:page-size="queryData.pageSize"
        layout="total, prev, pager, next" :total="count" background>
      </el-pagination>
      <br>
      <br>
      <!-- 新增修改组件 -->
      <addFrom ref="addRef" @updateList="getList('device/maintain', queryData)" />
    </el-card>
  </div>
  <!-- 底部区域 -->
  <el-from label-width="80px" style="text-align: center;">
    <div>Ant Design divro黑马前端合肥前端欢迎您</div>
    <div>© 2023 悦兴物业集团</div>
    <br>
  </el-from>
</template>

<style scoped>
img {
  max-width: 100px;
  max-height: 100px;
}

.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>